<template>
	<view class="container">

		<view class="inner">
			<view class="top-bg">
			</view>
			<view class="content">
				<view class="input">
					<input v-model="vdata.saveObject.name" type="text" placeholder="请输入姓名" />
				</view>
				<view class="input">
					<!-- #ifdef MP-YHDD -->
					<input v-model="vdata.saveObject.authBankCard" type="text" placeholder="请输入银行卡号" />
					<!-- #endif -->
					<!-- #ifndef MP-YHDD -->
					<input v-model="vdata.saveObject.idCard" type="text" placeholder="请输入身份证号(非必填)" />
					<!-- #endif -->
				</view>
				<view class="input">
					<input v-model="vdata.saveObject.phone" type="text" placeholder="请输入您的手机号码" />
					<text @tap="onSendMsg" :style="{ color: vdata.smsData.color }">{{ vdata.smsData.smsText }}</text>
				</view>
				<view class="input">
					<input v-model="vdata.saveObject.code" type="text" placeholder="请输入您的验证码" />
				</view>
				<view class="warning">
					填写的手机号需要同银行预留手机号保持一致，若不确定预留手机号，请联系客户经理进行查询，查询明确后再进行绑定。
				</view>
				<button class="btn" @tap="onConfirm" plain>确认进行认证</button>
				<view class="privacyAndService">
					<checkbox @click="checkboxClick" style="transform:scale(0.7)" />我已认真阅读并同意<text @click="toUrl('/pageUser/realName/serviceAgreement')">《服务协议》</text>和<text @click="toUrl('/pageUser/realName/privacyPolicy')">《隐私政策》</text>
				</view>
			</view>
			<view class="tips">
				<view class="title">温馨提示</view>
				<view>1.认证通过后将以姓名+手机号进行匹配用户福分情况。</view>
				<view>2.姓名或者手机号完成实名认证后，本人所获得的全部持卡权益、福分奖励将绑定至认证微信下。</view>
				<view>3.实名认证通过，绑定成功后将无法修改。</view>
			</view>
		</view>

	</view>
	<!-- #ifdef MP-YHDD -->
	<gzPopup ref="gzPopupRef" @onConfirm='onPopupConfirm'>&emsp;&emsp;尊敬的客户，后台未查询到您的实名认证信息，现发放您一张新客专享20元代金券，您至网点成为我行客户后，联系客户经理激活</gzPopup>
	<!-- #endif -->
	<!-- #ifndef MP-YHDD -->
	<gzPopup ref="gzPopupRef" @onConfirm='onPopupConfirm'>&emsp;&emsp;尊敬的客户，后台未查询到您的实名认证信息，现发放您一张新客专享50元代金券，您至网点成为我行客户后，联系客户经理激活</gzPopup>
	<!-- #endif -->
</template>

<script setup>
	import { reactive, ref, getCurrentInstance } from 'vue'
	import { onLoad, onHide } from '@dcloudio/uni-app'
	import { $sendSmsCode, $realNameAuth, $fansDetail } from '@/http/apiManager.js'
	import storageManage from '@/util/storageManage.js'
	import { checkBankCard, checkPhone } from '@/util/validate.js'

	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties

	// 提示弹窗实例
	const gzPopupRef = ref()

	// 数据源
	const vdata = reactive({
		saveObject: { // 请求参数
			authBankCard: '', // 银行卡号(长春专属)
			idCard: '', // 身份证号(郑州专属)
			phone: storageManage.userInfo().phone || '', // 手机号
			name: storageManage.userInfo().realName || '', // 姓名
			code: '', // 验证码
			// activityId: '',	// 首页引导实名活动id
			// activityTemplateNo: '',	// 首页引导实名活动模板编号
			// activityChannelId: undefined,	// 越减越便宜 渠道ID
		},
		smsData: { // 验证码相关数据
			smsText: '获取验证码',
			disabled: false,
			color: '#24c789',
			flag: false, // 避免重复获取验证码
		},
		checked: false, // 是否同意隐私政策和服务协议
	})
	// 是否实名认证
	const isAuth = storageManage.userInfo().isAuth == 0 ? true : false
	onLoad(({ activityId, activityChannelId, activityTemplateNo }) => {
		Object.assign(vdata.saveObject, {
			activityId,
			activityTemplateNo,
			activityChannelId
		})
	})

	const toUrl = (url) => {
		uni.navigateTo({
			url
		})
	}
	/**
	 * 调整【发送验证码】按钮 样式状态
	 */
	function getCode() {
		vdata.smsData.flag = true
		vdata.smsData.disabled = true
		vdata.smsData.smsText = "发送中..." //发送验证码
		vdata.smsData.color = "rgba(0,0,0,.2)" //追加样式，修改颜色
	}

	function originCode() {
		vdata.smsData.disabled = false
		vdata.smsData.color = "#24c789";
		vdata.smsData.smsText = "获取验证码"
		vdata.smsData.flag = false
	}
	/**
	 * 调整【发送验证码】按钮 样式状态
	 */
	let Timer

	function setTimer() {
		let holdTime = 60; //定义变量并赋值
		vdata.smsData.smsText = "重新获取(60)"
		Timer = setInterval(() => {
			if (holdTime <= 0) {
				originCode()
				clearInterval(Timer); //清除该函数
				return; //返回前面
			}
			vdata.smsData.smsText = "重新获取(" + holdTime + ")"
			holdTime--;
		}, 1000)
	}
	/**
	 * 发送验证码
	 */
	function onSendMsg() {
		if (isAuth) {
			$infoBox.toast('当前用户已实名')
			return
		}
		if (vdata.smsData.flag) return
		if (!checkPhone(vdata.saveObject.phone)){
			$infoBox.toast('请输入正确的手机号') //弹出提示框
			return
		}
		getCode()
		$sendSmsCode({ phone: vdata.saveObject.phone, flag: 10 }).then(({ bizData, code }) => {
			if (code == 0) {
				$infoBox.toast('验证码已发送') //弹出提示框
				setTimer(); //调用定时器方法
			} else {
				originCode()
			}
		}).catch(() => {
			originCode()
		})
	}

	function checkboxClick() {
		vdata.checked = !vdata.checked
	}
	/**
	 * 提交表单 发起实名
	 */
	async function onConfirm() {
		getApp().preventActive(async () => {
			if (isAuth) {
				$infoBox.toast('当前用户已实名')
				return
			}
			// 校验姓名
			if (!vdata.saveObject.name) {
				$infoBox.toast('请输入姓名')
				return
			}
			// #ifdef MP-YHDD
			if (!vdata.saveObject.authBankCard || !checkBankCard(vdata.saveObject.authBankCard)) {
				$infoBox.toast('请输入正确的银行卡号')
				return
			}
			// #endif
			// 校验手机号验证码
			if (!checkPhone(vdata.saveObject.phone)) {
				$infoBox.toast('请输入正确的手机号')
				return
			}
			if (!vdata.saveObject.code) {
				$infoBox.toast('请输入验证码')
				return
			}
			if (!vdata.checked) {
				$infoBox.toast('请勾选用户隐私政策')
				return
			}
			uni.showLoading({
				title: '认证中...'
			})
			const { bizData } = await $realNameAuth(vdata.saveObject)
			const { isAuth, dataFlag, msg } = bizData
			uni.hideLoading()
			if (isAuth === 'Y') {
				// 实名认证成功后 请求用户详情接口 更新用户详情
				const { bizData:fansInfo } = await $fansDetail()
				storageManage.userInfo(fansInfo)	// 更新用户详情
				$infoBox.successToast('实名认证成功', { duration: 2000 })
				setTimeout(() => {
					uni.navigateBack()
				}, 2000)
				return
			}
			// 实名认证失败 引导办卡实名 给出弹框提示
			if (isAuth === 'N' && dataFlag === '1') {
				gzPopupRef.value.open()
				return
			}
			// 没有实名引导活动的认证失败
			var tipMsg
			if (isAuth !== 'Y' && msg) {
				tipMsg = msg
			}
			if (!tipMsg) {
				tipMsg = '数据异常！'
			}
			$infoBox.toast(tipMsg)
		})
	}

	// 引导实名 认证失败 给出弹窗 跳转待激活卡券列表
	const onPopupConfirm = () => {
		uni.navigateTo({
			url: `/pageUser/myCoupon/index?tabCurrent=${0}&couponState=${3}`
		})
	}
</script>

<style lang="less">
	.container {
		width: 100%;
		min-height: 100vh;
		position: relative;
		background-color: #F7F8FB;
		overflow-y: hidden;
		box-sizing: border-box;

		.inner {
			padding: 32rpx;
			box-sizing: border-box;
		}

		.top-bg {
			width: 100%;
			height: 218rpx;
			background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/cc30e252-e493-408d-a08c-b36d2ba985bc.png') no-repeat left top / 100% 100%;
		}

		.content {
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 30rpx 48rpx 60rpx;

			.input {
				padding: 50rpx 0;
				border-bottom: 1rpx solid #eee;
				display: block;

				&:nth-of-type(3) {
					display: flex;
					justify-content: space-between;

					text {
						color: #24C789;
						flex-shrink: 0;
					}
				}
			}

			.warning {
				font-size: 22rpx;
				color: #FF5A5A;
				padding-left: 40rpx;
				position: relative;
				margin: 30rpx 0 52rpx;

				&::before {
					content: '';
					display: block;
					position: absolute;
					left: 0;
					top: 0;
					width: 26rpx;
					height: 26rpx;
					// background-image: url();
					background: url('../../static/new/user/warning-icon.png') no-repeat 0 0;
					background-size: 100% 100%;
				}
			}

			.btn {
				width: 100%;
				padding: 32rpx 0;
				background-color: #24C789;
				color: #fff;
				font-size: 32rpx;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 1;
				border: none;
			}

			.privacyAndService {
				margin-top: 30rpx;
				font-size: 24rpx;
				color: #666f80;

				text {
					color: #175be6;
				}
			}
		}

		.tips {
			margin-top: 28rpx;
			padding-bottom: 32rpx;

			view {
				margin-top: 32rpx;
				font-size: 26rpx;
				color: #666;
			}

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
		}
	}
</style>